<!--
 * @Author: awada 10254500+awadaawada@user.noreply.gitee.com
 * @Date: 2022-10-15 15:37:15
 * @LastEditors: awada 10254500+awadaawada@user.noreply.gitee.com
 * @LastEditTime: 2022-10-15 17:31:42
 * @FilePath: \JavaScriptd:\Briup\实训三\项目\第三个项目\点单项目\HeyTea_project\HeyTea-ui\src\pages\components\bottom_chart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container7" style="width:100% ;height: 60%;margin: 0 auto;" />
</template>

<script>
import { Area } from '@antv/g2plot'
export default {
  mounted() {
    this.getBchart()
  },
  methods: {
    getBchart() {
      fetch('https://gw.alipayobjects.com/os/bmw-prod/360c3eae-0c73-46f0-a982-4746a6095010.json')
        .then((res) => res.json())
        .then((originalData) => {
          let cnt = 2
          const area = new Area('container7', {
            data: originalData.slice(0, cnt),
            xField: 'timePeriod',
            yField: 'value',
            xAxis: {
              range: [0, 1]
            }
          })
          area.render()

          const interval = setInterval(() => {
            if (cnt === originalData.length) {
              clearInterval(interval)
            } else {
              cnt += 1
              area.changeData(originalData.slice(0, cnt))
            }
          }, 400)
        })
    }
  }

}
</script>

<style>

</style>
